import { useUserStore } from "@/stores/user";
import type { Directive, DirectiveBinding } from "vue";

// 指令到底是什么?
// 指令就是对某个DOM功能操作的封装

export const focus: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
    // console.log(el, binding)
    el.focus()
  },
};

export const color: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
    el.style.color = binding.value;
  },
  updated(el, binding) {
     el.style.color = binding.value;
  },
};



// 管理员权限特殊处理
const adminPerms = '*:*:*'
export const auth: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
    const store = useUserStore()
    const permissions = store.profile.permissions
    // 管理员的
    if (permissions.includes(adminPerms)) {
      return
    }
    // 如果是其它用户的
    if(!permissions.includes(binding.value)){
      // 删除自身
      el.remove()
    }
  },
};